<template>
  <div class="app">
    <h2>我是App组件???</h2>
    <h4>{{ data.arr }}</h4>
    <input type="text" v-model="index" />
    <button @click="changeIndexValue(index)">改变数组指定位置的值</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { onMounted, reactive, ref } from 'vue'

const data = reactive<{
  name: string
  arr: string[]
}>({
  name: '名称',
  arr: ['str1', 'str2', 'str3', 'str4'],
})

onMounted(() => {
  setTimeout(() => {
    console.log('arr.slice')
    data.arr.splice(1, 1)
  }, 5000)
})

let index = ref<number>(10)
const changeIndexValue = (index: number) => {
  data.arr[index] = '25'
}
</script>

<style></style>
